<template>
  <div class="table-wrapper">
    <p class="subject-title" v-if="subject">{{ subject }}列表</p>
    <div class="tabel-panel panel">
      <div v-if="loading" class="loading-data">
        <img class="loading-icon" src="@/assets/images/loading.gif" alt="" />
        数据加载中…
      </div>
      <div v-else-if="data.length === 0 && !loading" class="no-data">
        ): 没有数据
      </div>
      <div v-else-if="data.length > 0 && !loading">
        <el-table
          ref="table"
          v-bind="getTableAttrs($attrs)"
          :data="data"
          :span-method="spanMethod"
          @select-all="selectAll"
          @select="select"
        >
          <template
            v-for="column in columns.filter(
              (column) =>
                !(typeof column.hidden === 'function'
                  ? column.hidden()
                  : column.hidden)
            )"
          >
            <el-table-column
              v-if="column.slot"
              :label="column.label"
              :key="column.value"
            >
              <slot :name="column.slot" />
            </el-table-column>
            <el-table-column
              v-if="column.buttons"
              :key="column.value"
              v-bind="getColumnAttrs(column)"
            >
              <template v-slot="{ row, $index }">
                <el-button
                  v-for="button in column.buttons.filter(
                    (button) =>
                      !(typeof button.hide === 'function'
                        ? button.hide(row)
                        : button.hide)
                  )"
                  :key="button.value"
                  :size="button.size"
                  :type="button.type"
                  :icon="button.icon"
                  :loading="button.loading"
                  :class="
                    typeof button.class === 'function'
                      ? button.class(row)
                      : button.class
                  "
                  :disabled="
                    typeof button.disabled === 'function'
                      ? button.disabled(row)
                      : button.disabled
                  "
                  @click="button.click(row, $index)"
                >
                  {{
                    button.label
                      ? typeof button.label === 'function'
                        ? button.label(row)
                        : button.label
                      : getRowIdentity(row, button.prop)
                  }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
              v-else
              :key="column.value"
              :label="column.label"
              :prop="column.prop"
              min-width="100px"
              v-bind="getColumnAttrs(column)"
            />
          </template>
        </el-table>
        <div class="pagination-wapper clearfix">
          <div class="pagination-info">
            当前 第<span>{{ pagination.currentPage }}</span
            >页 / 共<span>{{ pageNumber }}</span
            >页&nbsp;, 共<span>{{ pagination.total }}</span
            >条数据
          </div>
          <el-pagination
            v-if="pagination"
            :layout="layout"
            prev-text="前一页"
            next-text="后一页"
            :page-count="pagination.pageNumber"
            v-bind="pagination"
            @current-change="currentChange"
            @size-change="sizeChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import { getRowIdentity } from '@/utils'
import _ from 'lodash'
export default {
  name: 'Tabel',
  inheritAttrs: false,
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
    spanMethod: {
      type: Function,
    },
    pagination: {
      type: Object,
      default: null,
    },
    layout: {
      type: String,
      default: 'prev, pager, next, jumper',
    },
  },
  computed: {
    pageNumber: function () {
      return Math.ceil(this.pagination.total / this.pagination.pageSize)
    },
  },
  methods: {
    getTableAttrs(attrs) {
      return _.assign({ stripe: false, border: false, showHeader: true }, attrs)
    },
    getColumnAttrs(attrs) {
      return _.assign({}, { align: 'center', resizable: false }, attrs)
    },

    selectAll(selection) {
      this.$emit('select-all', selection)
    },
    select(selection) {
      this.$emit('select', selection)
    },

    currentChange(val) {
      this.$emit('pagination-change', { type: 'currentPage', val })
    },
    sizeChange(val) {
      this.$emit('pagination-change', { type: 'pageSize', val })
    },
  },
  watch: {
    $route: {
      handler(route) {
        this.subject =
          route.meta && route.meta.subject ? route.meta.subject : ''
      },
      immediate: true,
    },
  },
}
</script>
<style lang="scss">
.pagination-wapper {
  margin-top: 30px;
  .pagination-info {
    float: left;
    line-height: 30px;
    span {
      font-weight: 700;
    }
  }
}

table {
  color: #272727;
}
</style>
